import { drawerConfig, drawerTitle, drawerVisible } from "./drawer";
import { modalConfig, modalVisible } from "./modal";
import { searchConfig } from "./search";
import { tableData, tableConfig, tableLoading, tablePage } from "./table";
import {
  defaultFormState,
  drawerFormState,
  drawerInputValidators,
  operateType,
  queryParams,
} from "./store";
import { fetchSearchMap } from "./utils";
export let tmp_proxy: any = null;
export const refreshTable = async (searchParams: any = {}) => {
  tablePage.current = 1;
  initObjAttr(queryParams, searchParams);
  await fetchList();
};
export const fetchList = async () => {
  try {
    tableLoading.value = true;
    tableData.value.length = 0;
    queryParams.page = tablePage.current;
    queryParams.page_size = tablePage.pageSize;
    const res: any = await tripartiteApi.query(queryParams);
    if (res.code != 200) return message.error(res.message);
    tableData.value = res?.data?.list ?? [];
    tablePage.total = res?.data?.attributes?.total ?? 0;
  } catch (error: any) {
    message.error(error.message);
  } finally {
    tableLoading.value = false;
  }
};
const showDrawer = () => (drawerVisible.value = true);
const showModal = () => (modalVisible.value = true);
export const handleAction = async ({ record, type }: any) => {
  operateType.value = type;
  initObjAttr(drawerFormState, defaultFormState);
  initObjAttr(drawerInputValidators, createArray(false, 1));
  switch (trimAll(type)) {
    case "update":
      drawerTitle.value = $t("base.editTripartitePay");
      initObjAttr(drawerFormState, record, "target");
      if (record.is_support_pay === 1) {
        drawerFormState.payCapacity[1] = "B";
      }
      if (record.is_support_withdraw === 1) {
        drawerFormState.payCapacity[0] = "A";
      }
      drawerFormState.support_pay_passageways =
        record?.support_pay_passageways?.split(",") ?? [];
      showDrawer();
      break;
    case "update->status":
      tmp_proxy.$confirm({
        closable: true,
        icon: null,
        maskClosable: true,
        title: () => (
          <>
            {$t("tripartite25")}
            {record.is_disabled === 0 ? $t("base.disable") : $t("base.enable")}
          </>
        ),
        style: {
          top: "30%",
        },
        content: (
          <>
            {record.is_disabled === 0
              ? `${$t("tripartite26")}${record.name}${$t("tripartite28")}`
              : `${$t("tripartite27")}${record.name}${$t("tripartite29")}`}
          </>
        ),
        onOk: async () => {
          await tripartiteApi.updateStatus({
            id: record.id,
          });
          message.success($t("base.updateSucess"));
          fetchList();
        },
      });
      break;
  }
};
export default defineComponent({
  setup(props, { slots, expose, attrs, emit }) {
    const { proxy } = reactive<any>(getCurrentInstance());
    tmp_proxy = proxy;
    const defineSearch = searchConfig();
    const defineTable = tableConfig();
    const defineDrawer = drawerConfig();
    const defineModal = modalConfig({ refreshTable, fetchList });
    watch(
      () => sysZone.value,
      () => fetchList()
    );
    onActivated(() => {
      fetchList();
      fetchSearchMap();
    });

    return () => (
      <>
        <div style="padding: 10px">
          <tips-card
            title={getProxyT("tripartite30")}
            content={getProxyT("tripartite31")}
          />
        </div>
        <s-search {...defineSearch} />
        <s-table {...defineTable} />
        <s-drawer {...defineDrawer} />
        <s-modal {...defineModal} />
      </>
    );
  },
});
